<template>
  <div>
    <van-nav-bar left-arrow title="确认订单" @click-left="$router.go(-1)" />
    <!-- 表单 -->
    <van-form class="shop-ok">
      <!-- 地址 -->
      <van-contact-card type="add" add-text="请填写服务地址" @click="$router.push('/myress')" />
      <!-- 商品详情 -->
      <van-card tag="热门" :price="serve.price.toFixed(2)" :desc="serve.eazy" :title="serve.name"
        :thumb="require(`@/assets/${serve.detail}`)">
      </van-card>

      <!-- 选择时间 -->
      <van-cell v-if="this.timeValue.timeD == ''" title="请选择服务时间" @click="time = true" />
      <!-- 服务时间 -->
      <div v-else class="time-A" @click="time = true">
        <span>服务时间：</span>{{ timeValue.timeY }} {{ timeValue.timeD }}
      </div>
      <!-- 弹出层 -->
      <van-popup v-model="time" position="bottom" round closeable>
        <div class="svctm">
          <h4>选择开始时间</h4>
          <!-- 顶部时间导航条 -->
          <van-tabs @click="onClick" swipe-threshold="1" line-width="30px" :color="$store.state.primary_color_1"
            :v-model="dates">
            <van-tab v-for="(item, i) in dates" :key="i" :name="item.format('YYYY-MM-DD')"
              :title="`${week[(item.format('d'))] + item.format(' MM月DD日')}`">
            </van-tab>
          </van-tabs>
          <!-- 格子 -->
          <van-grid class="grid" clickable default>
            <van-grid-item @click="addTime($event)" v-for="(item, i) in timeNum" :key="i">
              <span>{{ item }}</span>
            </van-grid-item>
          </van-grid>
          <!-- 确定 -->
          <van-button type="warning" style="width: 100%;" @click="time = false"
            :color="`linear-gradient(to right, ${$store.state.primary_color_1}, ${$store.state.primary_color_2})`">
            确定
          </van-button>
        </div>
      </van-popup>
      <!-- 底部确定 -->
      <van-button is-link class="btn" type="info" text="确定"
        :color="`linear-gradient(to right, ${$store.state.primary_color_1}, ${$store.state.primary_color_2})`">
      </van-button>


    </van-form>
  </div>
</template>

<script>
import httpApi from '@/http'
import moment from 'moment'
export default {
  data() {
    return {
      radio: '1',
      switchChecked: false,
      // 商品详情
      serve: [],
      // 服务时间
      timeValue: {
        timeY: moment().format('YYYY-MM-DD'),
        timeD: '',
      },




      time: false,
      week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      dates: [],
      timeNum: [
        '08:00', '08:30',
        '09:00', '09:30',
        '10:00', '10:30',
        '11:00', '11:30',
        '12:00', '12:30',
        '13:00', '13:30',
        '14:00', '14:30',
        '15:00', '15:30',
        '16:00', '16:30',
        '17:00', '17:30',
        '18:00', '18:30',
        '19:00', '19:30',
        '20:00'
      ]
    }
  },
  methods: {
    onClick(title) {
      // console.log(title);
      this.timeValue.timeY = title
      // console.log(this.timeValue);
    },
    addTime(e) {
      // console.log(e.currentTarget.firstElementChild.innerHTML);
      this.timeValue.timeD = e.currentTarget.firstElementChild.innerHTML
      this.time = false

    },

  },
  mounted() {
    // 接收的商品数据
    let sid = this.$route.params.id
    httpApi.serveApi.queryIdSmallClassList({ sid }).then(res => {
      this.serve = res.data.data[0]
      console.log('服务数据', this.serve);
    })
    console.log('object', obj);
    for (let i = 0; i < 7; i++) {
      let now = moment()
      now.add(i, 'd')
      // console.log(now);
      this.dates.push(now)
    }
    // console.log(this.dates)
  },
}
</script>

<style lang="scss" scoped>
.shop-ok {
  display: flex;
  flex-direction: column;
}

.time-A {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}

.svctm {
  padding: 20px;

  >h4 {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  >.grid {
    margin-top: 10px;

    span {
      font-size: 14px;
    }
  }
}

.btn {
  width: 90%;
  margin: 60px auto;
  border-radius: 10px;
}
</style>